<template>
	<view class="Novel">
		<!-- 这个这垃圾，不支持插槽现在，白写了之前的插槽，因为渲染有问题 -->
		<swiperComponent :swiperImgList="swiperImgList"></swiperComponent>
		<!-- 新书模块 -->
		<novelRecommendFirst>
			<view slot="title">重磅新书</view>
			<view slot="content">
				<view class="recommend_content">
					<view class="content_box" v-for="(item, index) in newNovelList" :key="index"
						@click="gotoBook(item)">
						<image :src="item.image" mode=""></image>
						<view class="novel_title">{{item.title}}</view>
					</view>
				</view>
			</view>
		</novelRecommendFirst>

		<!-- 热门推荐 -->
		<novelRecommendSecond>
			<view slot="title">热门推荐</view>
			<!-- 阻止上层的元素的点击事件的发生 这里我只要这个事件发生 -->
			<!-- 上一层有一个没有定义的函数，这里用来模仿上一层有一个其他点击事件，以防止冒泡行为 -->
			<view slot="huanyihuan" @click.stop="changNovel">换一换</view>
			<view slot="content">
				<view class="remenContent" v-for="(item, index) in re_men_List" :key="index" @click="gotoBook(item)">
					<view class="novelImg">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="novelInfo">
						<view class="title">
							{{item.title}}
						</view>
						<view class="info">
							{{item.info}}
						</view>
						<view class="other">
							<view class="author">
								{{item.author}}
							</view>
							<view class="number">
								{{item.number}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</novelRecommendSecond>

		<!-- 经典热书 -->
		<novelRecommendFirst v-if="flag >= 3">
			<view slot="title">经典热书</view>
			<view slot="content">
				<view class="recommend_content">
					<view class="content_box" v-for="(item, index) in classicList" :key="index" @click="gotoBook(item)">
						<image :src="item.image" mode=""></image>
						<view class="novel_title">{{item.title}}</view>
					</view>
				</view>
			</view>
		</novelRecommendFirst>

	</view>
</template>

<script>
	import swiperComponent from '../../components/swiper_btn_component/swiper_btn_component.vue'
	import novelRecommendFirst from '../../components/novel_recommend_1/novel_recommend_1.vue'
	import novelRecommendSecond from '../../components/novel_recommend_2/novel_recommend_2.vue'

	export default {
		data() {
			return {
				queryObj: {
					classify: '全部',
					limit: 5,
					page: 1
				},
				swiperImgList: [],

				// 推荐类组件需要用到的数组
				// 这个是新书推荐数组
				newNovelList: [],

				// 热门推荐
				re_men_List: [],
				total: 0,
				isLoading: false,

				// 经典热书
				classicList: [],

				flag: 2
			};
		},
		components: {
			swiperComponent,
			novelRecommendFirst,
			novelRecommendSecond
		},

		onLoad() {
			// 	// 获取轮播图图片
			this.getNovieImg()
			// 	// 获取新书
			this.getNewNovel()
			//  热门推荐
			this.get_re_menNovel()
			// 	// 获取经典热书
			this.getClassicNovel()
		},

		onReachBottom() {
			this.flag += 1
		},

		methods: {

			async getNovieImg() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/article/novel',
					data: this.queryObj
				})

				this.swiperImgList = res.data
			},

			//  新书模块
			async getNewNovel() {
				this.queryObj.limit = 8
				const {
					data: res
				} = await this.$myRequest({
					// 这里暂时先用这个接口，因为还没有开发出，这些推荐的接口来，所以先用这个做测试 日后来改
					url: '/my/article/novel',
					data: this.queryObj
				})
				this.newNovelList = res.data
			},

			// 热门推荐模块
			changNovel(event) {
				this.isLoading = true
				if (this.queryObj.limit * this.queryObj.page >= this.total) {
					return uni.showToast({
						title: '数据已经空啦',
						icon: 'success'
					})
				}
				this.queryObj.page += 1
				this.isLoading = false
				if (this.isLoading) return
				this.get_re_menNovel()
			},

			async get_re_menNovel() {
				this.queryObj.limit = 3
				// // 这里用作测试， 因为没有具体的数据库 日后不会这样用，会改进
				// this.queryObj.page = 3
				const {
					data: res
				} = await this.$myRequest({
					// 这里暂时先用这个接口，因为还没有开发出，这些推荐的接口来，所以先用这个做测试 日后来改
					url: '/my/article/novel',
					data: this.queryObj
				})
				this.re_men_List = res.data
				this.total = res.total
			},

			// 经典热书模块
			async getClassicNovel() {
				this.queryObj.limit = 8

				// 这里用作测试， 因为没有具体的数据库 日后不会这样用，会改进
				this.queryObj.page = 2
				const {
					data: res
				} = await this.$myRequest({
					// 这里暂时先用这个接口，因为还没有开发出，这些推荐的接口来，所以先用这个做测试 日后来改
					url: '/my/article/novel',
					data: this.queryObj
				})
				this.classicList = res.data

			},

			// 跳转
			gotoBook(item) {
				uni.navigateTo({
					url: `/subpkg/novel_catalog/novel_catalog?classify=${item.classify}&title=${item.title}&author=${item.author}&info=${item.info}&image=${item.image}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.recommend_box {
		margin: 30rpx 20rpx;

		.recommend_title {
			.title {
				font-weight: 700;
				color: #000;
				font-size: 24px;
			}

			.btn_more {
				display: flex;
			}

			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: #949bad;
		}
	}

	.recommend_content {
		display: flex;
		flex-wrap: wrap;

		.content_box {
			display: flex;
			flex-direction: column;
			width: 160rpx;
			// box-shadow: 5px 5px 5px rgba(0,0,0,.3);
			margin: 20rpx 9rpx;

			.novel_title {
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				// text-overflow: ellipsis;
			}

			image {
				width: 160rpx;
				height: 216rpx;
			}
		}
	}

	.remenContent {
		display: flex;

		.novelImg {
			margin: 20rpx 20rpx;

			image {
				// 145 190 116 152
				height: 304rpx;
				width: 232rpx;
			}
		}

		.novelInfo {
			margin-left: 20rpx;
			margin-top: 20rpx;

			.title {
				font-weight: 700;
			}

			.info {
				font-size: 14px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin: 20rpx 0;
			}

			.other {
				font-size: 12px;
				display: flex;

				.author,
				.number {
					margin: 20rpx 20rpx;
					color: #949bad;
				}

				.author {
					margin-left: 0;
				}
			}
		}
	}
</style>
